@config.main("Home") {
    <div class="body-box">

        <div class="index-box">
            <div class="index-left">

                <h4>Introduction</h4>
                <p>Hordeum vulgare (barley) is the world's fourth most important cereal crop and an important model for ecological adaptation,
                    having been cultivated in all temperate regions from the Arctic Circle to the tropics. It was one of the first domesticated
                    cereal grains originating in the Fertile Crescent over 10,000 years ago. About two-thirds of the global barley crop is used
                    for animal feed, while the remaining third underpins the malting, brewing, and distilling industries. Although the human diet
                    is not a primary use, barley offers potential health benefits, and is still the major calorie source in several parts of the world.
                    Barley is a diploid member of the grass family, making it a natural model for the genetics and genomics of the Triticeae tribe,
                    including polyploid wheat and rye. With a haploid genome size of ~5.3 Gb in seven chromosomes, it is one of the largest diploid
                    genomes sequenced to date.</p>

                <hr>
                <form class="form-inline" autocomplete="off" action="/alfalfa/all/searchPage" method="get">
                    <div class="input-group" style="width: 100%">
                        <input type="text" name="input" class="form-control"
                        required placeholder="e.g.ko03021 NAM" id="input" autocomplete="off"/>
                        <span class="input-group-btn">
                            <button class="btn my-btn" type="submit"
                            style="border-top-right-radius: 4px;
                                border-bottom-right-radius: 4px">Search</button>
                        </span>
                    </div>
                    <span   style=" margin-left: 1%;text-align: left">
                        e.g.,&nbsp;<a href="#" onclick="showExample()" class="resLink"><em id="egQuery">
                        example</em></a></span>
                </form>

                <hr>

            </div>

            <div class="index-right" style="border-left: 1px solid #dddddd;
                height: 100%;
                padding-left: 20px">
                <div>
                    <img src="/assets/images/logo.jpg" style="width: 100%;
                        border-radius: 10px;
                        margin-bottom: 10px" />
                </div>
            </div>

        </div>


        <div class="index-box">
            <div class="index-left" style="width: 100%">
                <h4>Tools</h4>
                <div class="left-box">
                    @imgBox("Blast", "exchange", routes.BlastController.blastPage())
                    @imgBox("Design Primer", "paypal", routes.ToolsController.toolsPage("primerPage"))
                    @imgBox("Enrichment", "gears", routes.ToolsController.toolsPage("enrichPage"))
                    @imgBox("Muscle", "share-alt", routes.ToolsController.toolsPage("musclePage"))
                    @imgBox("Lastz", "flask", routes.ToolsController.toolsPage("lastzPage"))
                    @imgBox("Genewise", "hourglass", routes.ToolsController.toolsPage("genewisePage"))
                </div>
            </div>
        </div>

    </div>

    <footer>Copyright © Copyright 2021 Auto Parts All Right Reserved </footer>

    <script>

            function showExample() {
                $("#input").val("ko03021 NAM")
            }

    </script>
}

    @imgBox(title: String, fa: String, href: Call) = {
    <a href="@href">
        <div class="img-box">
            <div class="img">
                <i class="fa fa-@fa"></i>

            </div>
            <p>@title</p>
        </div>
    </a>
}